<template>
	<view class="wrapper">
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<u-navbar title="供应商列表" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<!-- <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon> -->
				<!-- <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line> -->
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>

		<view class="search-form">
			<view class="dipt">
				<input type="text" :disabled="false" v-model="searchIpt" />
				<image class="img-select-icon" src="/static/images/play_arrow_filled.png" @click="handleSelect"></image>
			</view>
			<!-- 省市区的-->
			<coreshop-select v-model="show" mode="mutil-column-auto" :list="pickerList" :default-value="pickerIndex"
				@confirm="onConfirm"></coreshop-select>
			<view class="lg">
				<img class="icon" src="/static/images/search-icon.png" alt="" srcset="" />
				<input type="text" placeholder="净水器" />
			</view>
			<button class="search-btn">搜索</button>
		</view>


		<view class="header-tabbar">
			<view class="header-tab-item" v-for="item in tabbarList" :key="item.name">
				<view class="bgimg">
					<img class="tab-img" :src="item.url" alt="" srcset="" />
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<Card :data="{ title: '热销商品', list: hotList, isChange: true}" />
		<template v-for="item in shopList">
			<Card
				:data="{ info: { name: item.companyName, url: item.logoUrl, fw: item.fw, id: item.id, isgz: item.isConcern}, list: hotList}"
				:cardType="{Htype: 'info'}">
				<template #info-msg="{data}">
					<view class="msg">{{data.fw}}</view>
				</template>
				<template #btns="{data}">
					<view class="btns">
						<button class="card-btn gz-btn" @click="handleAttention(data)">+ 关注</button>
						<button class="card-btn jd-btn" @click="handleEnterTheShop(data)">进店</button>
					</view>
				</template>
			</Card>
		</template>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		<!-- 底部tab -->
		<tab-bar />
	</view>
</template>

<script>
	import tabbarList from './index.js'
	export default {
		data() { // 响应式数据
			return {
				tabbarList: [],
				hotList: [{
						name: '全沃超滤净水机', // 热销商品名称
						url: 'http://cdnjson.com/images/2024/10/31/01.png', // 热销商品图片
						//  ... id 啥的别的参数 你看着给
					},
					{
						name: '全沃前置过滤器',
						url: 'http://cdnjson.com/images/2024/10/31/G1.png'
					},
					{
						name: '全沃前置过滤器',
						url: 'http://cdnjson.com/images/2024/10/31/01-1.png'
					},
					{
						name: '全沃前置过滤器',
						url: 'http://cdnjson.com/images/2024/10/31/01-3.png'
					},
					{
						name: '全沃超滤净水机',
						url: 'http://cdnjson.com/images/2024/10/31/01-2.png'
					},
					{
						name: '全沃精度过滤器',
						url: 'http://cdnjson.com/images/2024/10/31/image-1.png'
					},
					{
						name: '全沃超滤机',
						url: 'http://cdnjson.com/images/2024/10/31/RO185L.png'
					},
					{
						name: '全沃后置过滤器',
						url: 'http://cdnjson.com/images/2024/10/31/RO800.png'
					},
					{
						name: '全沃精度过滤器',
						url: ''
					},
					{
						name: '全沃后置过滤器',
						url: ''
					},
					{
						name: '全沃超滤机',
						url: ''
					},
					{
						name: '全沃前置过滤器',
						url: ''
					},
				],
				shopList: [],
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				show: false,
				pickerList: this.$db.get("areaList"),
				province: this.$db.get("areaList"),
				pickerIndex: [17, 11, 1], // picker索引值
				region: [],
				provinceKey: 17, //省份id
				cityKey: 11, //市id
				areaKey: 1, //区域id
				areaId: this.$store.state.config.reshipAreaId || 0,
				page: 1,
				limit: 10,
				searchIpt: ''
			}
		},
		onLaunch() { // 生命周期函数--监听小程序初始化
			uni.hideTabBar()
		},
		onShow() {
			const chooseLocation = requirePlugin('chooseLocation');
			const location = chooseLocation.getLocation();
			if (location != null) {
				this.form.latitude = location.latitude;
				this.form.longitude = location.longitude;
				this.region = [location.province, location.district, location.city];
				this.form.street = location.name;
			}
			this.page = 1
			this.shopList = []
			this.getMyLocation()
			this.init()
			console.log(8899);
		},
		onUnload() { // 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
			// #ifdef MP-WEIXIN 
			chooseLocation.setLocation(null);
			// #endif
		},
		created() { // 生命周期函数--监听页面加载
			this.tabbarList = tabbarList
		},
		onReachBottom() {
			if (this.status === 'loading') {
				this.handlePageList();
			}
		},
		methods: { // 方法
			init() {
				this.getFullPath(this.areaId, this.province);
				this.pickerIndex = [this.provinceKey, this.cityKey, this.areaKey];
				this.handlePageList()
				this.status = 'loading'
			},
			async handlePageList() {
				const {
					code,
					data,
					error
				} = await this.$u.api.getSupplierPageList({
					page: this.page,
					limit: this.limit
				})
				if (code === 0) {
					this.shopList = [...this.shopList, ...data]
					if (data.length >= this.limit) {
						this.page++
						this.status = 'loading'
					} else {
						this.status = 'nomore'
					}
					console.log(data);
				} else {
					this.$u.toast(res.msg)
				}
			},
			handleAttention(data) {
				console.log("关注:::::", data);
			},
			handleEnterTheShop(data) {
				console.log("进店:::::", data.id);
				uni.navigateTo({
					url: '/pages/supplier/supplierShop/index?id=' + data.id
				})
			},
			handleSelect() {
				this.show = true
			},
			getMyLocation() {
				let _this = this;
				// #ifdef MP-WEIXIN
				wx.getFuzzyLocation({
					type: 'wgs84',
					success(res) {
						_this.latitude = res.latitude
						_this.longitude = res.longitude
						console.log('当前位置的经度1：' + res);
					},
					fail: function() {
						_this.$u.toast("获取您的经纬度坐标失败")
					}
				})
				// #endif
				// #ifndef MP-WEIXIN
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_this.longitude = res.longitude;
						_this.latitude = res.latitude;
						console.log('当前位置的经度2：' + res);
					},
					fail: function() {
						_this.$u.toast("获取您的经纬度坐标失败")
					}
				});
				// #endif
			},
			//倒查城市信息
			getFullPath(id, data) {
				for (var i = 0; i < data.length; i++) {
					if (id == data[i].value) {
						if (!data[i].children) {
							this.areaKey = i;
							return true;
						} else if (data[i].hasOwnProperty("children")) {
							if (data[i].children[0] && !data[i].children[0].children) {
								this.cityKey = i;
								return true;
							} else {
								this.provinceKey = i;
								return true;
							}
						}
					} else {
						if (data[i].hasOwnProperty("children")) {
							if (data[i].children[0] !== undefined) {
								if (data[i].children[0].hasOwnProperty("children")) {
									this.provinceKey = i;
								} else {
									this.cityKey = i;
								}
							}
							if (typeof data[i].children != 'undefined') {
								var res = this.getFullPath(id, data[i].children);
								if (res) {
									return true;
								}
							}
						}
					}
				}
			},
			onConfirm(e) {
				console.log(e);
				let provinceName = e[0].label;
				let cityName = e[1].label;
				let countyName = e[2].label;
				this.pickerValue = e[0].label + " " + e[1].label + " " + e[2].label
				let data = {
					provinceName: provinceName,
					provinceId: e[0].value,
					cityName: cityName,
					cityId: e[1].value,
					countyName: countyName,
					countyId: e[2].value,
				}
				this.$u.api.getAreaId(data).then(res => {
					if (res.status) {
						this.areaId = res.data;
						this.init();
					} else {
						uni.showModal({
							title: '提示',
							content: '地区选择出现问题，请重新选择地区',
							showCancel: false
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		background-color: #F3F3F3;
		margin: 14rpx 30rpx;

		.search-form {
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 38rpx;
			height: 90rpx;
			padding: 0 24rpx;

			.lg {
				display: flex;
				align-items: center;
				flex: 1;

				.icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 8rpx;
				}
			}

			.dipt {
				display: flex;
				align-items: center;
				width: 100rpx;
				height: 100%;
				padding-right: 6rpx;
				box-sizing: border-box;

				input {
					flex: 1;
				}

				.img-select-icon {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.search-btn {
				width: 140rpx;
				background-color: #D0241C;
				color: #fff;
				border-radius: 34rpx;
				height: 66rpx;
				font-size: 28rpx;
				line-height: 66rpx;
				font-weight: 400;
			}


		}

		.header-tabbar {
			display: flex;
			margin: 20rpx 0;
			padding: 26rpx 16rpx;
			background-color: #fff;
			border-radius: 24rpx;
			flex-wrap: wrap;
			box-sizing: border-box;
			padding-bottom: 6rpx;

			.header-tab-item {
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;
				background-size: contain;
				margin-bottom: 26rpx;

				.bgimg {
					width: 110rpx;
					height: 110rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: url('/static/images/supplier/gys-bar-icon.png');
					background-size: 100% 100%;
				}

				.tab-img {
					width: 72rpx;
					height: 72rpx;
				}
			}
		}


		.btns {
			display: flex;

			.card-btn {
				width: 110rpx;
				height: 44rpx;
				padding: 0;
				margin-left: 10rpx;
				line-height: 44rpx;
				text-align: center;
				color: #fff;
				font-size: 24rpx;
				border: none !important;
			}

			.gz-btn {
				background-color: #D0241C;
			}

			.jd-btn {
				background-color: #FFCC00;
			}
		}

		.msg {
			color: #9f9f9f;
		}
	}
</style>